<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%@taglib uri="/WEB-INF/fmt.tld" prefix="fmt"%>
<%@taglib uri="/WEB-INF/el.tld" prefix="el"%>
<%@taglib uri="/WEB-INF/fn.tld" prefix="fn"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<c:import url="/includes/css_inc.jsp"/>
		<c:import url="/includes/js_inc.jsp"/>
		<script>
			$(function(){
				var count = $("count").val();
				$("#save").button({
		            icons: {
		                primary: "ui-icon-disk"
		            }
				}).click(function(){
					if ("${userInfo.areaLevel}" == 3) {
						if (validateEmptyById(["$budgetYear","#expenseDate","#refNo","#btnFile"])){
							disableField(["save","confirm"]);
							$("#save").addClass("ui-button-disabled ui-state-disabled");
							$("#confirm").addClass("ui-button-disabled ui-state-disabled");
							$("#budgetYear").removeAttr("disabled");
							$("#provinceId").removeAttr("disabled");
							$("#saveForm").submit();
					 	}
					} else {
						if (validateEmptyById(["$provinceId","$budgetYear","#expenseDate","#refNo","#btnFile"])){
							disableField(["save","confirm"]);
							$("#save").addClass("ui-button-disabled ui-state-disabled");
							$("#confirm").addClass("ui-button-disabled ui-state-disabled");
							$("#budgetYear").removeAttr("disabled");
							$("#provinceId").removeAttr("disabled");
							$("#saveForm").submit();
					 	}
					}
				});
				$("#edit").button({
		            icons: {
		                primary: "ui-icon-disk"
		            }
				}).click(function(){
					$("#job").val("edit");
					$("#budgetYear").removeAttr("disabled");
					$("#provinceId").removeAttr("disabled");
					$("#saveForm").submit();
				});

				$("#btnSearch").button({
		            icons: {
		                primary: "ui-icon-search"
		            }
		        });
				$("#back").button({
		            icons: {
		                primary: "ui-icon-arrowreturnthick-1-w"
		            }
		        }).click(function() {
		        	$("#job").val("back");
		        	$("#saveForm").removeAttr("enctype");
		        	$("#saveForm").submit();
		        });
				$("#confirm").button({
		            icons: {
		                primary: "ui-icon-circle-check"
		            }
		        }).click(function() {
					if ("${userInfo.areaLevel}" == 3) {
						if (validateEmptyById(["$budgetYear","#expenseDate","#refNo","#btnFile"])){
							if(confirm('คุณต้องการยืนยันข้อมูล?')==true){
								disableField(["save","confirm"]);
								$("#save").addClass("ui-button-disabled ui-state-disabled");
								$("#confirm").addClass("ui-button-disabled ui-state-disabled");
								$("#budgetYear").removeAttr("disabled");
								$("#provinceId").removeAttr("disabled");
			        			$("#job").val("confirm");
			        			$("#saveForm").submit();
							}
					 	}
					} else {
						if (validateEmptyById(["$provinceId","$budgetYear","#expenseDate","#refNo","#btnFile"])){
							if(confirm('คุณต้องการยืนยันข้อมูล?')==true){
								disableField(["save","confirm"]);
								$("#save").addClass("ui-button-disabled ui-state-disabled");
								$("#confirm").addClass("ui-button-disabled ui-state-disabled");
								$("#budgetYear").removeAttr("disabled");
								$("#provinceId").removeAttr("disabled");
			        			$("#job").val("confirm");
			        			$("#saveForm").submit();
							}
					 	}
					}
		        });

				$("[name=btnDel]").button({
		            icons: {
		                primary: "ui-icon-closethick"
		            },
		            text : false
				});
				$("#btnDownload").button({
		            icons: {
		                primary: "ui-icon-arrowthickstop-1-s"
		            }
				}).click(function(){
					window.location='${pageContext.request.contextPath}/acc7?app=ACC70302&job=downloadTemplate';
				});
				$("#btnAdd").button({
		            icons: {
		                primary: "ui-icon-plusthick"
		            }
				}).click(function(){
					if(validateEmptyById(["#expenseAmountDisplay","$categoryIdDisplay","#expenseDetailDescDisplay"])){
						$("#expenseDetail").css("display","");
						var dhtml = new DHTML();
						var tr = dhtml.createElement(document.getElementById("expenseDetailData"), ["tr","id=tr_"+count], "");
						var td = dhtml.createElement(tr, ["td","align=right"], "");
						var span = dhtml.createElement(td, ["span"], addCommas2D($("#expenseAmountDisplay").val()));
						var input = dhtml.createElement(td, ["input","type=hidden","name=expenseAmount","value="+$("#expenseAmountDisplay").val()], "");
						var td1 = dhtml.createElement(tr, ["td","align=left"], "");
						var categoryName = "";
						categoryName = $("#categoryIdDisplay option:selected").text();
						var span1 = dhtml.createElement(td1, ["span"], categoryName);
						var input1 = dhtml.createElement(td1, ["input","type=hidden","name=categoryId","value="+$("#categoryIdDisplay").val()],"");
						var td2 = dhtml.createElement(tr, ["td"], "");
						var span2 = dhtml.createElement(td2, ["span"], $("#expenseDetailDescDisplay").val());
						var input2 = dhtml.createElement(td2, ["input","type=hidden","name=expenseDetailDesc","value="+$("#expenseDetailDescDisplay").val()], "");
						var td3 = dhtml.createElement(tr, ["td"], "");
						var delTR = dhtml.createElement(td3, ["a","id=btnDel"+$("#count").val()+"","name=btnDel","class=acc67-button"], "");
						var btnDel = "#btnDel"+$("#count").val();
						$(btnDel).button({
				            icons: {
				                primary: "ui-icon-closethick"
				            },
				            text : false
						});
						delTR.onclick = function () {
							dhtml.removeElement(tr);
							$("#count").val($("#count").val()-1);
							if($("#count").val() == 0){
								$("#expenseDetail").css("display","none");
								disableField(["save","confirm"]);
								$("#save").addClass("ui-button-disabled ui-state-disabled");
								$("#confirm").addClass("ui-button-disabled ui-state-disabled");
							}
						}
						enableField(["save","confirm"]);
						$("#save").removeClass("ui-button-disabled ui-state-disabled");
						$("#confirm").removeClass("ui-button-disabled ui-state-disabled");
						$("#count").val(parseInt($("#count").val())+parseInt(1));
					}
				});
		        thaiDatepicker("expenseDate","#","1");
				$("#expenseAmount").blur(function() {
					$.ajax({
						type: "post",
						url: "/provacc/acc67",
						dataType: "json",
						async: false,
						cache: false,
						data: {
							app: "ajax",
							job: "getRemainAcc7",
							provinceId: $("#provinceId").val(),
							budgetYear: $("#budgetYear").val()
						},
						success: function(data) {
							if(data[0].result == "1"){
								if ( toFloat($("#expenseAmount").val()) > toFloat(data[0].remain)){
									alert("กรุณากรอกรายจ่ายจำนวนที่น้อยกว่าเท่ากับ : " + addCommas(data[0].remain) +" บาท");
									$("#expenseAmount").val("");
								}
							}
						}
					});
		        });
				if ("${job}" == 'save') {
					disableField(["save","confirm"]);
					$("#save").addClass("ui-button-disabled ui-state-disabled");
					$("#confirm").addClass("ui-button-disabled ui-state-disabled");
				}
				$("#radioAddList").click(function(){
					if (validateEmptyById(["$provinceId","$budgetYear","#refNo","#expenseDate","#expenseDesc"])) {
						$("#fieldAddList").css("display","");
						$("#fieldUpload").css("display","none");
						if (parseInt($("#count").val()) > 0) {
							$("#expenseDetail").css("display","");
						} else {
							$("#expenseDetail").css("display","none");
							disableField(["save","confirm"]);
							$("#save").addClass("ui-button-disabled ui-state-disabled");
							$("#confirm").addClass("ui-button-disabled ui-state-disabled");
						}
						$("#saveForm").removeAttr("enctype");
						$("#expenseAmountDisplay").removeAttr("disabled");
						$("#categoryIdDisplay").removeAttr("disabled");
						$("#expenseDetailDescDisplay").removeAttr("disabled");
						$("#btnFile").attr("disabled","disabled");
					} else {
						document.getElementById("radioAddList").checked = false;
					}
				});
				$("#radioUpload").click(function(){
					if (validateEmptyById(["$provinceId","$budgetYear","#refNo","#expenseDate","#expenseDesc"])) {
						$("#fieldAddList").css("display","none");
						$("#fieldUpload").css("display","");
						$("#expenseDetail").css("display","none");
						$("#saveForm").attr("enctype","multipart/form-data");
						$("#expenseAmountDisplay").attr("disabled","disabled");
						$("#categoryIdDisplay").attr("disabled","disabled");
						$("#expenseDetailDescDisplay").attr("disabled","disabled");
						$("#btnFile").removeAttr("disabled");
						enableField(["save","confirm"]);
						$("#save").removeClass("ui-button-disabled ui-state-disabled");
						$("#confirm").removeClass("ui-button-disabled ui-state-disabled");
					} else {
						document.getElementById("radioUpload").checked = false;
					}
				});
			});
			function removeExpense(object){
				var dhtml = new DHTML();
				if(confirm('คุณต้องการลบรายการรายจ่าย?')==true){
					var id = object.parentNode.parentNode.id;
					dhtml.removeElementById(id);
					$("#count").val($("#count").val()-1);
					if($("#count").val() == 0){
						disableField(["save","confirm"]);
						$("#expenseDetail").css("display","none");
						$("#save").addClass("ui-button-disabled ui-state-disabled");
						$("#confirm").addClass("ui-button-disabled ui-state-disabled");
					}
				}
			}
		</script>
	</head>
	<body>
		<c:set var="auth" value="${el:getMapValue(menuAuth, 'ACC70302')}"/>
		<c:import url="/apps/msg.jsp"/>
		<form class="acc67-form" name="saveForm" id="saveForm" action="${pageContext.request.contextPath}/acc7" method="post">
		<input type="hidden" name="app" id="app" value="ACC70302"/>
		<input type="hidden" name="job" id="job" value="${job}"/>
		<input type="hidden" name="docNo" id="docNo" value="${expenseBean.docNo}"/>
		<c:if  test="${expenseBean.expenseStatus == 'Y' || userInfo.areaLevel =='2'}" var="isDisable"/>
		<c:if  test="${!empty expenseBean.expenseStatus}" var="disableField"/>
		<c:if test="${job == 'save'}" var="display"/>
			<table width="100%" class="ui-widget ui-widget-content" border="0">
				<tr>
					<th align="left" class="acc67-header ui-widget-header" colspan="2"><b>${screenCode.ACC70302}</b></th>
				</tr>
				<tr>
					<td width="22%" class="bold">เลขที่เอกสาร : </td>
					<td>${expenseBean.docNo}</td>
				</tr>
				<tr>
					<td class="bold">จังหวัด : </td>
					<td>
						<c:if test="${userInfo.areaLevel =='3'}">
							<c:forEach var="data" items="${userInfo.listUserProvice}">
								${data.provinceName}
								<input type="hidden" name="provinceId" id="provinceId" value="${data.provinceId}">
								<span id="$provinceId" style="display: none"></span>
							</c:forEach>
						</c:if>
						<c:if test="${userInfo.areaLevel=='1' || userInfo.areaLevel=='2'}">
							<select name="provinceId" id="provinceId" ${disableField?'disabled':''}>
								<option value="">----- เลือก -----</option>
								<c:forEach var="data" items="${userInfo.listUserProvice}">
									<c:if test="${data.provinceId == provinceId}" var="provinceSeleted"/>
									<option value="${data.provinceId}" ${provinceSeleted?'selected':''}>${data.provinceName}</option>
								</c:forEach>
							</select>
						<span id="$provinceId" class="red">*</span>
						</c:if>
					</td>
				</tr>
				<tr>
					<td class="bold">ปีงบประมาณ : </td>
					<td>
						<select name="budgetYear" id="budgetYear" ${disableField?'disabled':''}>
							<option value="">----- เลือก -----</option>
							<c:if test="${!empty listBudgetYear}">
								<c:forEach var="data" items="${listBudgetYear}" varStatus="x">
									<c:if var="selected" test="${data.BUDGET_YEAR == expenseBean.budgetYear}"/>
									<option value="${data.BUDGET_YEAR}" ${selected ? 'selected' : ''}>${data.BUDGET_YEAR}</option>
								</c:forEach>
							</c:if> 
						</select><span id="$budgetYear" class="red">*</span>
					</td>
				</tr>
				<tr>
					<td class="bold">เลขที่เอกสารอ้างอิง : </td>
					<td>
						<input type="text" name="refNo" id="refNo" value="${expenseBean.refNo}" ${isDisable?'disabled':''}>
						<span id="#refNo" class="red">*</span>
					</td>
				</tr> 
				<tr>
					<td class="bold">วันที่จ่ายเงิน : </td>
					<td>
						<input type="text" name="expenseDate" id="expenseDate" size="12" maxlength="10" onkeypress="return numberAndSlash(event);" onblur="dateFormat(this);" value="${el:dateTh(expenseBean.expenseDate)}" ${isDisable?'disabled':''}>
						<span id="#expenseDate" class="red">*</span>
					</td>
				</tr>
				<tr>
					<td class= "bold" valign="top">ชื่อโครงการ/คำอธิบายรายการ : </td>
					<td valign="top">
						<textarea cols="30" rows="3" name="expenseDesc" id="expenseDesc">${expenseBean.expenseDesc}</textarea>
						<span id="#expenseDesc" class="red">*</span>
					</td>
				</tr>
				<c:if test="${job == 'save'}">
				<tr>
					<td></td>
					<td>
						<input type="radio" name="typeAdd" id ="radioAddList" value="add"/> เพิ่มรายการ <br/>
						<input type="radio" name="typeAdd" id="radioUpload" value="upload"/> upload excel 
						<span id="@btn" class="red">*</span>
					</td>
				</tr>
				</c:if>
				<c:if test="${expenseBean.expenseStatus != 'Y'}">
					<tr>
					<td colspan="2">
						 	<fieldset id="fieldAddList" style="display: ${display ? 'none':''}"> 
							<%-- <fieldset id="fieldAddList">--%>
							<legend> ข้อมูลการจ่าย </legend>
								<table width="100%" class="ui-widget ui-widget-content">
									<tr>
										<td class="bold">จำนวนเงิน : </td>
										<td>
											<input type="text" name="expenseAmountDisplay" id="expenseAmountDisplay" onkeypress="return numberAndDot(event);" onblur="this.value = addCommas2D(this.value);"/>
											<span id="#expenseAmountDisplay" class="red">*</span>
										</td>
									</tr>
									<tr>
										<td class="bold">หมวดการจ่าย : </td>
										<td>
											<select name="categoryIdDisplay" id="categoryIdDisplay" >
												<option value="">-----เลือก-----</option>
												<c:forEach items="${expenseCategoryList}" var="data">
													<option value="${data.categoryId}">${data.categoryName}</option>
												</c:forEach>
											</select>
											<span id="$categoryIdDisplay" class="red">*</span>
										</td>
									</tr> 
									<tr>
										<td class= "bold" valign="top">คำอธิบายรายการ : </td>
										<td>
											<textarea cols="30" rows="3" name="expenseDetailDescDisplay" id="expenseDetailDescDisplay"></textarea>
											<span id="#expenseDetailDescDisplay" class="red">*</span>
										</td>
									</tr>
									<tr>
										<td align="center" colspan="2">
										<button type="button" name="btnAdd" id="btnAdd" class="acc67-button">เพิ่มรายการ</button>
										</td>
									</tr>
								</table>
						</fieldset>
					</td>
				</tr> 
				<tr>
					<td colspan="2">
					<fieldset id="fieldUpload" style="display: none;">
						<legend> Upload File</legend>
						<table width="100%" class="acc67-grid ui-widget ui-widget-content" id="payTableDetail">
							<tr>
								<td colspan="2">
									<button type="button" name="btnDownload" id="btnDownload"" class="acc67-button">Download Template</button>
								</td>  
							</tr> 
							<tr>
								<td  class="bold" width="20%">นำเข้าจากไฟล์ : </td>
								<td>
									<input type="file" id="btnFile" name="xlsFile" disabled="disabled"/>
									<span id="#btnFile" class="red">*</span>
								</td>
							</tr>
						</table>
					</fieldset>
					</td>
				</tr>
				</c:if>
				<tr> 
					<td colspan="2">
						<fieldset style="display: ${display ? 'none':''};" id="expenseDetail">
						<legend> รายละเอียดการจ่าย </legend>
							<table  width="100%" class="ui-widget ui-widget-content">
								<tr>
									<th align="center" class="ui-state-default" width="15%">จำนวนเงิน</th>
									<th align="center" class="ui-state-default" width="30%">หมวดการจ่าย</th>
									<th align="center" class="ui-state-default">คำอธิบาย</th>
									<c:if test="${expenseBean.expenseStatus != 'Y'}">
										<th align="center" class="ui-state-default" width="5%">ลบ</th>
									</c:if>
								</tr>
								<c:if test="${!empty listExpenseDetailBean}">
									<c:set value="0" var="count"/>
										<c:forEach items="${listExpenseDetailBean}" var="data" varStatus="x">
											<tr id="tr_detail_${data.seq}" class="grid-tr-${x.count % 2}">
												<td align="right">
													<fmt:formatNumber pattern="#,##0.00" value="${data.expenseAmount}" />
													<input type="hidden" name="expenseAmount" value="${data.expenseAmount}">
												</td>
												<td>
													${el:getDataUtil('CAT7',data.categoryId)}
													<input type="hidden" name="categoryId" value="${data.categoryId}">
												</td>
												<td>
													${data.expenseDetailDesc}
													<input type="hidden" name="expenseDetailDesc" value="${data.expenseDetailDesc}">
												</td>
												<c:if test="${expenseBean.expenseStatus != 'Y'}">
													<td align="center"><button type="button" name="btnDel" id="btnDel" class="acc67-button"  onclick="removeExpense(this)"/></td>
												</c:if>
												<c:set value="${x.count}" var="count"/>
											</tr>
										</c:forEach>
										<input type="hidden" name="count" id="count" value="${count}"/>
								</c:if>
								<c:if test="${empty listExpenseDetailBean}">
									<input type="hidden" name="count" id="count" value="0"/>
								</c:if>
								<tbody id="expenseDetailData"></tbody>
							</table>
						</fieldset>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<c:if  test="${expenseBean.expenseStatus != 'Y'}" >
							<c:if test="${fn:contains(auth, 'I') || fn:contains(auth, 'U')}">
								<button type="button" name="save" id="save"  class="acc67-button">บันทึกข้อมูล</button>
								<button type="button" name="confirm" id="confirm"  class="acc67-button">ยืนยันข้อมูล</button>
							</c:if>
						</c:if>
						<button type="button" name="back" id="back"  class="acc67-button">ย้อนกลับ</button>
					</td> 
				</tr>
			</table>
		</form>
	</body>
</html>